'use client'
import { useCallback, useEffect } from 'react'
import { useBoolean } from 'ahooks'
import { useSelectedLayoutSegment } from 'next/navigation'
import { useContextSelector } from 'use-context-selector'
import AppContext, { useAppContext } from '@/context/app-context'
import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
import { useProviderContext } from '@/context/provider-context'
import { useModalContext } from '@/context/modal-context'

const navClassName = `
  flex items-center relative mr-0 sm:mr-3 px-3 h-8 rounded-xl
  font-medium text-sm
  cursor-pointer
`

const Header = () => {
  const { isCurrentWorkspaceEditor, isCurrentWorkspaceDatasetOperator } = useAppContext()
  const systemFeatures = useContextSelector(AppContext, v => v.systemFeatures)
  const selectedSegment = useSelectedLayoutSegment()
  const media = useBreakpoints()
  const isMobile = media === MediaType.mobile
  const [isShowNavMenu, { toggle, setFalse: hideNavMenu }] = useBoolean(false)
  const { enableBilling, plan } = useProviderContext()
  const { setShowPricingModal, setShowAccountSettingModal } = useModalContext()
  const isFreePlan = plan.type === 'sandbox'
  const handlePlanClick = useCallback(() => {
    if (isFreePlan)
      setShowPricingModal()
    else
      setShowAccountSettingModal({ payload: 'billing' })
  }, [isFreePlan, setShowAccountSettingModal, setShowPricingModal])

  useEffect(() => {
    hideNavMenu()
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [selectedSegment])
  return (
    <div></div>
    // <div className='flex flex-1 items-center justify-between px-4 bg-background-body'>
    //   <div className='flex items-center'>
    //     {isMobile && <div
    //       className='flex items-center justify-center h-8 w-8 cursor-pointer'
    //       onClick={toggle}
    //     >
    //       <Bars3Icon className="h-4 w-4 text-gray-500" />
    //     </div>}
    //     {!isMobile && <>
    //       <Link href="/apps" className='flex items-center mr-4'>
    //         <LogoSite className='object-contain' />
    //       </Link>
    //       {systemFeatures.license.status === LicenseStatus.NONE && <GithubStar />}
    //     </>}
    //   </div>
    //   {isMobile && (
    //     <div className='flex'>
    //       <Link href="/apps" className='flex items-center mr-4'>
    //         <LogoSite />
    //       </Link>
    //       {systemFeatures.license.status === LicenseStatus.NONE && <GithubStar />}
    //     </div>
    //   )}
    //   {!isMobile && (
    //     <div className='flex items-center'>
    //       {!isCurrentWorkspaceDatasetOperator && <ExploreNav className={navClassName} />}
    //       {!isCurrentWorkspaceDatasetOperator && <AppNav />}
    //       {(isCurrentWorkspaceEditor || isCurrentWorkspaceDatasetOperator) && <DatasetNav />}
    //       {!isCurrentWorkspaceDatasetOperator && <ToolsNav className={navClassName} />}
    //     </div>
    //   )}
    //   <div className='flex items-center flex-shrink-0'>
    //     <LicenseNav />
    //     <EnvNav />
    //     {enableBilling && (
    //       <div className='mr-3 select-none'>
    //         <HeaderBillingBtn onClick={handlePlanClick} />
    //       </div>
    //     )}
    //     <WorkspaceProvider>
    //       <AccountDropdown isMobile={isMobile} />
    //     </WorkspaceProvider>
    //   </div>
    //   {(isMobile && isShowNavMenu) && (
    //     <div className='w-full flex flex-col p-2 gap-y-1'>
    //       {!isCurrentWorkspaceDatasetOperator && <ExploreNav className={navClassName} />}
    //       {!isCurrentWorkspaceDatasetOperator && <AppNav />}
    //       {(isCurrentWorkspaceEditor || isCurrentWorkspaceDatasetOperator) && <DatasetNav />}
    //       {!isCurrentWorkspaceDatasetOperator && <ToolsNav className={navClassName} />}
    //     </div>
    //   )}
    // </div>
  )
}
export default Header
